<template>
	<view v-if="info">
		<view class="title">转发预览</view>
		<view class="card">
			<view class="card-item">
				<view class="card-item-c-logo">
					<image :src="ossUrl + `/static/image/logo.png`" mode=""></image>
					鼎圈电子名片
				</view>
				<view class="card-item-c-subTitle">{{form.share_title}}</view>
				<view class="card-item-c">
					<image :src="info.share_styles[shareCurrent].Template_img" mode="" class="card-item-c-1" v-if="!shareCropperUrl"></image>
					<!-- <image :src="share_img" class="card-item-c-2" mode="widthFix"></image> -->
					<view class="card-item-c-2">
						<u--image width="333rpx" height="266.4rpx" :src="shareCropperUrl" :lazy-load="true" v-if="shareCropperUrl" mode="widthFix"></u--image>
						<u--image width="333rpx" height="266.4rpx" :src="share_img" :lazy-load="true" mode="widthFix" v-else></u--image>
					</view>
					
					<image :src="info.share_styles[shareCurrent].Template_img" class="card-item-c-3" v-if="!shareCropperUrl"></image>
				</view>
			</view>
			<view class="card-logo">
				<image :src="info.share_user.head" mode="aspectFill"></image>
			</view>
		</view>
		<!--  custom-style="position: fixed; left: 200%" -->
		<l-painter :board="template" style="width: 100%;" ref="painterRef" custom-style="position: fixed; left: 200%"/>
		<view class="tabs">
			<view :class="current === 0 ? 'tabs-item tabs-item-ac' : 'tabs-item' " @click="setCurrent(0)">修改标题</view>
			<view :class="current === 1 ? 'tabs-item tabs-item-ac' : 'tabs-item' " @click="setCurrent(1)">修改封面</view>
		</view>
		<template v-if="current === 0">
			<view class="form">
				<view class="form-title">输入你的标题</view>
				<view class="form-input">
					<input type="text" v-model="form.share_title"/>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="contents">
				<view class="cards">
					<view class="cards-title">选择你转发的名片样式</view>
					<view class="cards-list">
						<view class="cards-list-item" v-for="(it,index) in info.share_styles" @click="setShareCurrent(index, it)">
							<view class="cards-list-item-h">
								<image :src="it.Template_img" mode="" class="card-item-c-1" v-if="!shareCropperUrl"></image>
								<view class="card-item-c-2">
									<!-- <u--image width="333rpx" height="266.4rpx" :src="shareCropperUrl === '' ? share_img : shareCropperUrl" :lazy-load="true"></u--image> -->
									<image :src="shareCropperUrl === '' ? share_img : shareCropperUrl" style="width: 333rpx;" mode="widthFix"></image>
								</view>
								<image :src="it.Template_img" class="card-item-c-3"></image>
								<image :src="ossUrl + `/static/image/vip/5.png`" class="card-vip" mode="widthFix" v-if="it.vip_status == 1"></image>
								<image :src="ossUrl + `/static/image/vip/6.png`" class="card-vip" mode="widthFix"
									v-if="it.user_id"></image>	
							</view>
							<view class="cards-list-item-s" v-if="index == shareCurrent">
								<image :src="ossUrl + '/static/image/1.png'" mode=""></image>
							</view>
							
						</view>
					</view>
				</view>
				<view class="contents-line"></view>
				<view class="jq" @click="toPage">
					<view class="jq-l">
						<image :src="ossUrl + '/static/image/4.png'" mode=""></image>
						截取我的海报
					</view>
					<image :src="ossUrl + '/static/image/3.png'" mode=""></image>
				</view>
				<view class="box-scroll" v-if="shareCropperUrl">
					<view class="box-scroll-item">
						<image :src="shareCropperUrl" mode="" class="box-scroll-item-img"></image>
						<image :src="ossUrl + '/static/image/static/6.png'" mode="" class="box-scroll-item-del" @click.stop="del()"></image>
					</view>
				</view>
				<view class="contents-title">我的海报</view>
				<view class="contents-hb">
					<image :src="it.img" v-for="it in hbInfo.my_poster" @click="setShare_img(it.img)" mode="widthFix"></image>
				</view>
				<view class="btns" @click="submit">保存</view>
			</view>
			
		</template>
		<view class="btns" v-if="current === 0" @click="submit">保存</view>
		<!-- 会员弹窗 -->
		<MemberPopupVue ref="MemberPopupVueRef" @reload="reload"/>
	</view>
</template>

<script>
	import {
		InformationShareStyles,InformationPosterIntroduction,InformationShareStylesSaving,InformationUserInfo
	} from '@/common/http/api.js'
	import {
		ossUpload, ossDel
	} from '@/common/oss.js'
	import MemberPopupVue from '@/components/memberPopup/memberPopup.vue'
	export default {
		props:['businessCardId'],
		components: {
			MemberPopupVue
		},
		data() {
			return {
				current: 0,
				form:{
					share_id: '',
					share_title: '',
					share_img: '',
					intercept: ''
				},
				info: '',
				shareCurrent: '',
				share_img: '',
				hbInfo: '',
				template: {},
				userInfo: {}
			};
		},
		created() {
			
			InformationUserInfo().then(res => {
				this.userInfo = res.data
				this.init()
			})
		},
		computed: {
			shareCropperUrl() {
				return this.$store.state.shareCropperUrl
			}
		},
		watch: {
			shareCropperUrl: {
				handler(val) {
			
					this.setPainter()
				},
				deep: true
			},
			shareCurrent:{
				handler(val) {
					this.setPainter()
				}
			}
		},
		methods:{
			reload(){
				InformationUserInfo().then(res=>{
					this.userInfo = res.data
				})
			},
			del(){
				this.form.intercept = ''
				this.$store.commit('setShareCropperUrl', '')
				this.setPainter()
				this.$forceUpdate()
			},
			setPainter(){
				this.template = {
					css: {
						// 根节点若无尺寸，自动获取父级节点
						width: '333rpx',
						height: '266.4rpx',
						background: "#fff",
					},
					views: [
						//底图
						{
							type: 'image',
							src: this.info.share_styles[this.shareCurrent].Template_img,
							css: {
								width: '100%',
								height: '100%',
								top: "0",
								right: "0",
								position: "absolute",
								zIndex: '5',
								borderRadius: "20rpx",
							}
						},
						//名片
						{
							type: 'image',
							src: this.shareCropperUrl != '' ? this.shareCropperUrl : this.share_img,
							css: {
								width: '333rpx',
								top: "0",
								right: "0",
								position: "absolute",
								zIndex: '4',
								borderRadius: "20rpx",
							}
						}
					]
				}
			},
			submit(){
				this.$refs.painterRef.canvasToTempFilePathSync({
				  fileType: "jpg",
				  // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
				  pathType: 'url',
				  quality: 1,
				  success: (res) => {
				    console.log(res.tempFilePath);
					
				    // 非H5 保存到相册
				    // H5 提示用户长按图另存
				    ossUpload(res.tempFilePath).then(res => {
						let business_card_img = res.url
						let data = {
							...this.form,
							share_id: this.info.share_styles[this.shareCurrent].id,
							share_img: business_card_img,
							business_card_id:this.businessCardId,
							intercept: this.shareCropperUrl
						}
						console.log('data',data)
						uni.showLoading()
						InformationShareStylesSaving(data).then(res=>{
							uni.hideLoading()
							uni.showToast({duration:3000,
								title:'保存成功',
								icon: 'none'
							})
							this.$store.dispatch('getShare')
							this.$store.commit('setIsRefresh', true)
							setTimeout(()=>{
								uni.navigateBack()
							},1500)
						})
				    }).catch(err => {
				    	uni.showToast({duration:3000,
				    		title: '上传失败！',
				    		icon: 'none'
				    	})
				    })
				  },
				});
				
			},
			init(){
				console.log('this.business_card_id',this.businessCardId)
				uni.showLoading()
				InformationShareStyles({business_card_id:this.businessCardId}).then(res=>{
					this.info = res.data
					this.share_img = res.data.share_user.business_card_img
					this.form.intercept = res.data.share_user.intercept || ''
					this.$store.commit('setShareCropperUrl', res.data.share_user.intercept || '')
					if(Array.isArray(res.data.share_styles) && res.data.share_styles.length > 0){
						if(res.data.share_user.share_id) {
							res.data.share_styles.forEach((i,index)=>{
								if(res.data.share_user.share_id == i.id) {
									this.shareCurrent = index
								}
							})
						} else {
							this.shareCurrent = 0
						}
					}
					
					this.form.share_title = res.data.share_user.share_title || '你好，我的鼎圈名片请惠存！'
					this.form.share_id = res.data.share_user.share_id
					InformationPosterIntroduction().then(res=>{
						uni.hideLoading()
						this.hbInfo = res.data
					})
				})
				
			},
			setShare_img(url){
				this.toPage(url)
			},
			setCurrent(e){
				this.current = e;
			},
			setShareCurrent(index, it) {
				if (it.vip_status == 1 && this.userInfo.vip === 0) {
					this.$refs.MemberPopupVueRef.show()
					return
				}
				this.shareCurrent = index
			},
			toPage(url){
				this.$store.commit('setShareQuery', url)
				uni.navigateTo({
					url:'/pagesC/clipper/clipper?w='+500+'&h='+400+'&type=2'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		width: 690rpx;
		margin: 46rpx auto 74rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #131313;
	}
	.card {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		margin-bottom: 49rpx;
		.card-item {
			width: 366rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			box-sizing: border-box;
			padding: 15rpx 17rpx;
			.card-item-c-logo {
				display: flex;
				align-items: center;
				font-family: PingFang SC;
				font-weight: 300;
				font-size: 24rpx;
				color: #AFAFAF;
				margin-bottom: 19rpx;
				image {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					margin-right: 14rpx;
				}
			}
			.card-item-c-subTitle {
				font-family: PingFang SC;
				font-weight: 300;
				font-size: 28rpx;
				color: #131313;
				margin-bottom: 30rpx;
			}
			.card-item-c {
				width: 333rpx;
				height: 266.4rpx;
				position: relative;
				.card-item-c-1 {
					width: 100%;
					height: 100%;
				}
				.card-item-c-2 {
					width: 333rpx;
					height: 266.4rpx;
					position: absolute;
					top: 0;
					left: 0;
					
					z-index: 2;
				}
				.card-item-c-3 {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 3;
				}
			}
		}
		.card-logo {
			margin-left: 36rpx;
			margin-right: 53rpx;
			image {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
			}
		}
	}
	.tabs {
		width: 690rpx;
		height: 93rpx;
		background: #FFFFFF;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-bottom: 70rpx;
		.tabs-item {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #131313;
		}
		.tabs-item-ac {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #12B475;
		}
	}
	.form {
		width: 571rpx;
		margin: 0 auto;
		margin-bottom: 97rpx;
		.form-title {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #131313;
			text-align: center;
			margin-bottom: 37rpx;
		}
		.form-input {
			width: 571rpx;
			height: 80rpx;
			background: #EAEAEA;
			border-radius: 40rpx;
			input {
				box-sizing: border-box;
				padding: 0 30rpx;
				
				align-items: center;
				height: 100%;
			}
			
		}
	}
	.btns {
		width: 660rpx;
		height: 86rpx;
		background: #12B475;
		border-radius: 43rpx;
		display: flex;
		align-items: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.cards {
		width: 100%;
		background: #FFFFFF;
		box-sizing: border-box;
		padding: 37rpx 26rpx;
		margin-bottom: 40rpx;
		.cards-title {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #131313;
			margin-bottom: 40rpx;
		}
		.cards-list {
			width: 100%;
			display: grid;
			grid-template-columns: repeat(2,1fr);
			grid-gap: 28rpx;
			.cards-list-item {
				position: relative;
				.cards-list-item-h {
					width: 333rpx;
					height: 266.4rpx;
					position: relative;
					margin-bottom: 25rpx;
					.card-item-c-1 {
						width: 100%;
						height: 100%;
					}
					.card-item-c-2 {
						width: 333rpx;
						height: 266.4rpx;
						position: absolute;
						top: 0;
						left: 0;
						
						z-index: 2;
					}
					.card-item-c-3 {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 3;
					}
				}
			}
			.cards-list-item-s {
				display: flex;
				align-items: center;
				justify-content: center;
				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
	}
	.contents-line {
		width: 750rpx;
		height: 1rpx;
		background: #D4D4D4;
		margin-bottom: 48rpx;
	}
	.jq {
		width: 349rpx;
		height: 98rpx;
		background: #12B475;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 28rpx;
		margin-left: 30rpx;
		margin-bottom: 30rpx;
		.jq-l {
			display: flex;
			align-items: center;
			image {
				width: 42rpx;
				height: 42rpx;
				margin-right: 16rpx;
			}
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}
		&>image {
			width: 26rpx;
			height: 26rpx;
		}
	}
	.contents {
		width: 100%;
		background: white;
	}
	.contents-title {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #292929;
		margin: 0 0 40rpx 30rpx;
	}
	.contents-hb {
		width: 690rpx;
		margin: 0 auto;
		display: grid;
		grid-template-columns: repeat(2,1fr);
		grid-gap: 17rpx;
		margin-bottom: 40rpx;
		image {
			width: 333rpx;
			//height: 266.4rpx;
		}
	}
	.box-scroll {
		width: 100%;
		white-space: nowrap;
		overflow-x: scroll;
		padding-top: 30rpx;
		margin-bottom: 30rpx;
	
		.box-scroll-item {
			display: inline-block;
			width: 333rpx;
			height: 266.4rpx;
			position: relative;
			margin-left: 30rpx;
	
			.box-scroll-item-img {
				width: 100%;
				height: 100%;
			}
	
			.box-scroll-item-del {
				width: 49rpx;
				height: 49rpx;
				position: absolute;
				top: -24.5rpx;
				right: -24.5rpx;
				z-index: 2;
	
			}
		}
		.box-scroll-item-ac {
			border: 4rpx solid seagreen;
		}
	}
	.card-vip {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 9999;
		width: 70rpx;
	}
</style>